<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import Quill from "quill";
import hljs from 'highlight.js/lib/core';
// 引入样式文件
import "quill/dist/quill.snow.css";

const props = defineProps({
  height: {
    type: String,
    default: '300px'
  }
});

const editorRef = ref(null);
const quillEditor = ref(null);
const maxHeight = ref(props.height);

onMounted(() => {
  // 初始化 Quill 编辑器
  quillEditor.value = new Quill(editorRef.value, {
    theme: 'snow', // 使用默认的 snow 主题
    placeholder: '请输入内容',
    modules: {
      // 配置语法高亮
      syntax: {hljs},
      toolbar: [
        [{size: []}], // 字体大小
        [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题级别
        [{font: []}], // 字体
        // 标题、加粗、斜体、下划线、删除线、引用、代码块、有序列表、无序列表、缩进、下标、上标、文本颜色、背景颜色、链接、图片
        [{header: 1}, {header: 2}, {color: []}, {background: []}, 'bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block',
          {list: 'ordered'}, {list: 'bullet'}, {'align': []}, {indent: '-1'}, {indent: '+1'},
          {script: 'sub'}, {script: 'super'}, 'link', 'image', {direction: 'rtl'}, 'clean'],
      ],
    },
  });
});
/**
 * 组件销毁前销毁 Quill 实例
 */
onBeforeUnmount(() => {
  // 在组件销毁前销毁 Quill 实例
  if (quillEditor.value) {
    // quillEditor.value.destroy();
    quillEditor.value = null;
  }
});
// 设置内容
const setContent = (htmlContent) => {
  if (quillEditor.value) {
    // 直接设置编辑器的 HTML 内容
    quillEditor.value.root.innerHTML = htmlContent;
  }
};
// 获取内容
const getContent = () => {
  if (quillEditor.value) {
    // 获取编辑器的 HTML 内容
    return quillEditor.value.root.innerHTML;
  }
  return '';
};
defineExpose({
  setContent,
  getContent
});
</script>

<template>
  <div class="v-quill-container">
    <div ref="editorRef" :style="{height: maxHeight}"></div>
  </div>
</template>

<style scoped>
.v-quill-container {
  height: 100%;
}
</style>